<template>
    <div class="login">
        <div class="top" style="width: 100vm; height: 20vh">
            <van-image
                    round
                    width="10rem"
                    height="10rem"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                    class="head-icon"
            />
        </div>
        <van-cell-group class="text">
            <van-field
                    class="account"
                    v-model="User.name"
                    label="账号"
                    placeholder="输入测试账号"
            />
            <van-field
                    class="password"
                    v-model="User.password"
                    clearable
                    label="密码"
                    type="password"
                    placeholder="测试密码"
            />
        </van-cell-group>
        <div style="position:relative; margin-top: 10px">
            <var style="margin-left: 20px; color: #db3d3c;width:50px" @click="register">免费注册</var>
            <var style="margin-right: 20px; color: #db3d3c;float: right; width: auto" @click="forgetPassword">账号密码登录</var>
        </div>
        <div style="margin-top: 30px" >
            <van-button style="margin: auto; width: 150px;height: 50px;display: block" type="warning" @click="login">登录</van-button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {ApiService} from "../../../axios/apiService";
    import { Image as VanImage,Dialog} from 'vant';
    export const login= new ApiService('/user/login')
    import md5 from 'js-md5';

    Vue.use(VanImage,Dialog);
    export default {
        props: {
        },
        data() {
            return {
                User:{
                    name:'admin',
                    password:'123456'
                }
            }
        },
        methods:{
            login() {
                //发送请求前先加密
                var password = md5(this.User.password)
                console.log("加密："+password);
                //登录请求
                login.getParams({
                password:password,
                name: this.User.name
              }).then(res=> {
                console.log(res);
                if(res.data.code == 200) {
                  //存入cookie
                  console.log(res)
                  document.cookie="userId="+res.data.data.id;
                  //提示跳转
                  Dialog.alert({
                    title:'系统提示',
                    message:'登陆成功'
                  }).then(()=>{
                        this.$router.push('/')
                      }
                  )
                }
              })
            },
            register() {
              this.$router.push("/user/register")
            },
            forgetPassword() {
              this.$router.push("forgetPassword")
            }
        }
    };
</script>
<style >
    .login .head-icon {
        display: block;
        margin: auto;
    }
    .text {

        margin-top: 50px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .account {
        position: relative;
        margin-top: 5px;
    }
    .password {
        position: relative;
        margin-top: 5px;
    }

</style>
